<template>
    <div>
        <draggable class="wrapper" v-model="list" :disabled="isSort">
            <transition-group>
                <el-card  v-for="(item,index) in list" :key="item" class="item container">
                    <div>
                        <p>{{item}}</p>
                        <el-button plain class="toTop" :disabled="isSort" icon="el-icon-top" style="border:none" @click="toTop(index)"></el-button>
                    </div>
                </el-card>
            </transition-group>

        </draggable>
        <div>
            <el-button v-if="isSort" type="primary" @click="sort">排序</el-button>
            <el-button v-else type="primary" @click="save">保存</el-button>
        </div>
    </div>
</template>

<script>
import draggable from 'vuedraggable';
export default {
    name:'about',
    data() {
        return {
            isSort:true,
            list: ['_(:з','_(:з」','_(:з」∠)','_(:з」∠)_']
        }
    },
    updated() {
        console.log(this.list)
    },
    methods:{
        //点击排序
        sort(){
            this.isSort = false;
        },
        //点击保存
        save(){
            this.isSort = true;
            //发送请求
        },
        //点击去第一个
        toTop(index){
            const newAttr = this.list[index];
            this.list.splice(index,1);
            this.list.unshift(newAttr)
        }
    },
    components:{
        draggable
    },
    mounted() {
    }
}
</script>

<style scoped lang="less">
.wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}
.item{
    position: relative;
    margin: 10px;
    font-size: 20px;
    width: 300px;
    height: 100px;
    color: #000;
}

    .toTop{
        position: absolute;
        right: 0;
        bottom: 0;
    }


</style>
